<template>
	<div class="discuss">
		<div class="discuss-header">
			<div class="my-user">
				<div class="user-avator">
					<image :src="userInfo.user_avatar" mode=""></image>
				</div>
				<div class="user-detail">
					<div class="user-name">
						<text>{{userInfo.user_nickName}}</text>
					</div>
					<div class="user-id">
						<text>ID:{{userInfo.user_id}}</text>
						<!-- <image src="../../static/vvip.png" mode=""></image> -->
					</div>
				</div>
				<div class="user-right">
					<image src="../../static/Gary.png" mode=""></image>
				</div>
			</div>
		</div>
		<div class="my-banner">
			<ul>
				<li>
					<div class="my-con">
						<text>1</text>
						<p>粉丝</p>
					</div>
				</li>
				<li>
					<div class="my-con">
						<text>1</text>
						<p>关注</p>
					</div>
				</li>
				<li>
					<div class="my-con">
						<text>{{num}}</text>
						<p>获赞</p>
					</div>
				</li>
				<li>
					<div class="my-con">
						<text>{{readTime | readFunc}}min</text>
						<p>阅读時長</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="discuss-list">
			<div class="list-header">
				<text>动态</text>
				<p>({{discussList.length}}条)</p>
			</div>
			<div class="list-con">
				<ul>
					<li v-for="(item,i) in discussList">
						<div class="list-title">
							<div class="list-box">
								<div class="list-avatar">
									<image :src="userInfo.user_avatar" mode=""></image>
								</div>
								<div class="list-name">
									<text>{{userInfo.user_nickName}}</text>
								</div>
							</div>
							<div class="list-point">
								<image src="../../static/point.png" mode=""></image>
							</div>
						</div>
						<div class="list-detail">
							<div class="detail-title">
								<text>{{item.write_description}}</text>
							</div>
							<div class="detail-con" @click="addJumpDetail(item)">
								<div class="detail-img">
									<image :src="item.book_img" mode=""></image>
								</div>
								<div class="detail-word">
									<text>{{item.book_title}}</text>
									<p>{{item.book_author}} {{item.book_category}}</p>
								</div>
							</div>
						</div>
						<div class="list-foot">
							<div class="list-time">
								<text>書評·</text>
								<p>{{item.write_create_time | formatData}}</p>
							</div>
							<div class="list-icon">
								<div class="icon-left" @click="deleteInfo(i)">
									<text>删除</text>
									<image src="../../static/删除.png" mode=""></image>
								</div>
								<div class="icon-right" @click="addGood(i)">
									<text v-if="!item.write_isShow">{{good[0]}}</text>
									<text class="active" v-else>{{good[1]}}</text>
									<image v-if="!item.write_isShow" src="../../static/赞.png" mode=""></image>
									<image v-else src="../../static/赞-active.png" mode=""></image>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				discussList: [],
				userInfo: {},
				readTime: 0,
				good: ['点赞', '已点赞'],
				num: 0
			}
		},
		onLoad() {
			let user = uni.getStorageSync('userInfo')
			this.readTime = uni.getStorageSync('runTime')
			console.log(this.readTime);
			this.userInfo = JSON.parse(user);
			console.log(this.userInfo);
			//调用云函数，查询书架
			uniCloud.callFunction({
					name: 'list_write',
					data: {}
				})
				.then(content => {

					let {
						result: {
							data
						}
					} = content;
					console.log('1.0', data);
					this.discussList = data;
				})
		},
		methods: {
			addGood(count, item) {
				for (let k = 0; k < this.discussList.length; k++) {
					if (count == k) {
						if (this.discussList[count].write_isShow) {
							uni.showToast({
								title: '您已点赞过',
								icon: 'none'
							})
							return
						} else {
							this.num += 1;
							this.discussList[count].write_isShow = true;
						}
					}
				}
			},
			deleteInfo(k) {
				if(this.discussList[k].write_id){					
					let that = this;
					uni.showModal({
						title: '您确定删除该书籍吗?',
						success(res) {
							if(res.confirm){
								uniCloud.callFunction({
									name:'delete_write',
									data:{write_id: that.discussList[k].write_id}
								}).then(content=>{
									console.log('1.0',content);
									uni.showToast({
										title:'删除评论成功',
										icon:'success'
									})
									let arr = that.discussList.filter(item=>{
										if(item.write_id != that.discussList[k].write_id){
											return item;
										}
									})
									that.discussList = arr
								})
							}else if(res.cancel){
								uni.showToast({
									title:'取消删除评论',
									icon:'none'
								})
							}
						}
					})
				}
			}
		,
		addJumpDetail(item) {
			let data = {
				'id': item.book_sourceUuid,
				'category': item.book_category,
				'description': item.book_description
			}
			uni.navigateTo({
				url: '../detail/detail?data=' + encodeURIComponent(JSON.stringify((data)))
			})
		}
		},
		filters: {
			formatData(data) {
				var date = new Date(data); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return Y + M + D + h + m + s;
			},
			readFunc(value) {
				let time = Math.floor(value / 60)
				return time
			}
		}
	}
</script>

<style lang="scss" scoped>
	.discuss {
		// height: 1500rpx;
		opacity: 1;
		overflow: hidden;
		background-image: url("../../static/background-image.png");
		left: -10px;
		top: 0px;
		width: 100%;
		opacity: 1;

		.discuss-header {
			width: 90%;
			margin: 50rpx auto 0;
			height: 180rpx;
			background-color: #fceccc;
			border-radius: 10px;
			display: flex;
			justify-content: center;
			overflow: hidden;

			.my-user {
				width: 92%;
				display: flex;
				align-items: center;

				.user-avator {
					// margin-top: 10rpx;
					width: 108rpx;
					height: 108rpx;
					margin-left: 8rpx;
					// overflow: hidden;
					box-sizing: border-box;

					image {
						width: 100%;
						height: 100%;
						border-radius: 100%;
						border: 1px solid #fd5e40;
					}
				}

				.user-detail {

					width: 440rpx;
					margin-left: 40rpx;
					margin-top: 10rpx;

					.user-name {
						text {
							font-weight: 600;
							font-size: 18px;
							color: rgba(59, 59, 59, 1);
						}
					}

					.user-id {
						display: flex;
						align-items: center;
						margin-top: 16rpx;

						text {
							width: 240rpx;
							display: block;
							font-size: 13px;
							color: rgba(119, 130, 138, 1);
							text-overflow: ellipsis;
							overflow: hidden;
							word-break: break-all;
							white-space: nowrap;
						}

						image {
							margin-left: 44rpx;
							width: 44rpx;
							height: 32rpx;
						}
					}
				}

				.user-right {
					width: 20rpx;
					height: 32rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

		}

		.my-banner {
			width: 90%;
			margin: 30rpx auto 0;
			height: 140rpx;
			opacity: 0.75;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			background: rgba(190, 145, 97, 1);
			box-shadow: 0px 0px 0px 0px rgba(74, 17, 25, 0.1);

			ul {
				width: 100%;
				height: 100%;
				padding: 0;
				list-style: none;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				text-align: center;

				li {
					color: rgba(255, 255, 255, 1);

					// font-weight: 600;
					text {
						font-size: 17px;
					}

					p {
						margin-top: 8rpx;
						font-size: 14px;
					}
				}
			}
		}

		.discuss-list {
			width: 100%;
			height: 2000rpx;
			background-color: #fceccc;
			overflow: hidden;

			.list-header {
				width: 90%;
				margin: 30rpx auto;
				display: flex;
				align-items: center;

				text {
					margin-left: 4rpx;
					font-weight: 600;
					font-size: 20px;
					color: rgba(59, 59, 59, 1);
				}

				p {
					margin: 4rpx 8rpx 0;
					font-size: 14px;
					color: rgba(59, 59, 59, 1);
				}
			}

			.list-con {
				width: 90%;
				margin: 0 auto;

				ul {
					width: 100%;
					// height: 700rpx;
					list-style: none;
					padding: 0;
					padding-bottom: 80rpx;
					overflow: hidden;

					li {
						width: 100%;
						height: 100%;
						// margin-bottom: 20rpx;
						padding-bottom: 80rpx;
						box-sizing: border-box;

						.list-title {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.list-box {
								display: flex;
								align-items: center;
								width: 70%;

								.list-avatar {
									width: 80rpx;
									height: 80rpx;

									image {
										width: 100%;
										height: 100%;
										border-radius: 100%;

									}
								}

								.list-name {
									margin-left: 30rpx;
									font-weight: 600;
									font-size: 18px;
									color: rgba(59, 59, 59, 1);
								}
							}

							.list-point {
								width: 50rpx;
								height: 50rpx;
								margin-right: 30rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}

						.list-detail {
							width: 100%;

							.detail-title {
								margin: 24rpx 4rpx;
								font-weight: 600;
								font-size: 18px;
								color: rgba(59, 59, 59, 1);
							}

							.detail-con {
								display: flex;
								overflow: hidden;
								width: 100%;
								height: 184rpx;
								border-radius: 6px;
								align-items: center;
								background: linear-gradient(90deg, rgba(247, 136, 23, 1) 0%, rgba(232, 111, 45, 1) 100%);

								.detail-img {
									width: 130rpx;
									height: 160rpx;
									margin-left: 8rpx;
									border: 1px solid #fceccc;
									border-radius: 8px;
									overflow: hidden;

									image {
										width: 100%;
										height: 100%;

									}
								}

								.detail-word {
									margin-left: 30rpx;

									text {

										font-size: 16.4px;
										// font-weight: 600;
										color: rgba(255, 255, 255, 1)
									}

									p {
										margin-top: 16rpx;
										font-size: 12px;
										color: rgba(255, 255, 255, 1)
									}
								}

							}

						}

						.list-foot {
							width: 100%;
							margin-top: 24rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							overflow: hidden;

							.list-time {
								display: flex;
								align-items: center;
								margin-left: 4rpx;
								width: 400rpx;

								text {
									font-size: 14.5px;
									color: rgba(119, 130, 138, 1);
								}

								p {
									margin-top: 4rpx;
									;
									margin-left: 6rpx;
									font-size: 13px;
									color: rgba(119, 130, 138, 1);
								}
							}

							.list-icon {
								// width: 40%;
								display: flex;
								align-items: center;
								margin-top: 6rpx;
								overflow: hidden;

								.icon-left {
									display: flex;
									align-items: center;
									margin-right: 40rpx;

									image {
										margin-left: 8rpx;
										width: 34rpx;
										height: 34rpx;
									}

									text {
										font-size: 13px;
										color: rgba(119, 130, 138, 1);
									}
								}

								.icon-right {
									margin-right: 4rpx;
									display: flex;
									align-items: center;

									image {
										margin-left: 8rpx;
										width: 34rpx;
										height: 34rpx;
									}

									text {
										font-size: 13px;
										color: rgba(119, 130, 138, 1);

										&.active {
											color: #f3821c;
										}
									}
								}
							}
						}

					}
				}
			}
		}
	}
</style>